<template>
  <div>
    <el-card style="width: 80%; margin-right: 10%; margin-left: 10%;">

      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template #title>
            <div style="font-size: 20px" >默认填写项设置</div>
          </template>

          <div style="border-top: 1px solid #eaeaea; margin-bottom: 15px"/>
          <el-form ref="form" :model="settingStore.settings.defaultLogSetting" label-width="80px" >
            <el-form-item label="默认职业">
              <JobSelector v-model="settingStore.settings.defaultLogSetting.job"/>
            </el-form-item>
            <el-form-item label="默认完成">
              <el-switch v-model="settingStore.settings.defaultLogSetting.completed" />
            </el-form-item>
          </el-form>
          <el-form :model="settingStore.settings.logSetting" label-width="80px">
            <el-form-item label="默认时间">
              <el-select v-model="settingStore.settings.logSetting.date" placeholder="请选择时间" >
                <el-option
                    v-for="item in TIME_SETTING"
                    :key="item"
                    :label="TIME_SETTING[item]"
                    :value="item"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="settingStore.resetLogSetting" plain>重置为默认</el-button>
        </el-collapse-item>
      </el-collapse>

    </el-card>
  </div>
</template>

<script setup lang="ts">
import { TIME_SETTING } from "@/data/constants/Constants";
import { useSettingsStore } from "@/data/stores/settings";
import JobSelector from '@/views/components/JobSelector/index.vue'

const activeNames = ['1','2','3', '4']
const settingStore = useSettingsStore()

</script>

<style scoped>

</style>